<template>
  <div class="ADselect">
    <el-card class="card">
      <!-- 面包屑 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>发布管理</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="box">
        <div class="box1">
          <el-table
          :data="brandData"
          style="width: 100%"
          height="400px"
          @row-click="getSeries">
            <el-table-column
              prop="name"
              label="品牌"
              width="250">
            </el-table-column>
            <el-table-column
            prop="editor"
            label="编辑"
            >
              <template slot-scope="scope">
                <el-button
                size="mini"
                plain
                type="danger"
                icon="el-icon-delete"
                circle
                @click="deleteBrand(scope.row)"
                >
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button
          type="success"
          @click="AddBrand()"
          class="btn"
          >
          新增品牌
          </el-button>
        </div>
        <div class="box2">
          <el-table
          :data="seriesData"
          style="width: 100%"
          height="400px">
            <el-table-column
              prop="name"
              label="系列"
              width="260">
            </el-table-column>
            <el-table-column
              prop="editor"
              label="编辑"
              >
              <template slot-scope="scope">
                <el-button
                size="mini"
                plain
                type="danger"
                icon="el-icon-delete"
                circle
                @click="deleteSeries(scope.row)"
                >
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button
          type="success"
          @click="AddSeries()"
          class="btn"
          v-show="showbtn"
          >
          新增系列
          </el-button>
        </div>
      </div>
      <el-dialog title="添加品牌" :visible.sync="dialogFormVisible">
        <el-form :model="Bform">
          <el-form-item label="品牌名称" :label-width="formLabelWidth" class="dialogBox">
            <el-input v-model="Bform.name"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="sureAddB">确 定</el-button>
        </div>
      </el-dialog>
            <el-dialog title="添加系列" :visible.sync="dialogForm">
        <el-form :model="Sform">
          <el-form-item label="系列名称" :label-width="formLabelWidth" class="dialogBox">
            <el-input v-model="Sform.name"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogForm = false">取 消</el-button>
          <el-button type="primary" @click="sureAddS">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ADselect',
  data () {
    return {
      brandData: [],
      seriesData: [],
      showbtn: false,
      Bid: '',
      Bform: {},
      Sform: {},
      dialogFormVisible: false,
      dialogForm: false,
      formLabelWidth: '80px'
    }
  },
  components: {},
  created () {
    this.getBrand()
    this.isShow()
  },
  methods: {
    // 获取所有品牌
    async getBrand () {
      const AUTH_TOKEN = sessionStorage.getItem('adtoken')
      this.$http.defaults.headers.common['token'] = AUTH_TOKEN
      const res = await this.$http.get('brand/selectAll?pageNow=1&pageSize=9999')
      // console.log(res)
      const {msg,status,data:{records}} = res.data
      if(status === 200) {
        this.brandData = records
      } else {
        console.log(msg)
      }
    },
    // 获取该品牌下的所有系列
    async getSeries (row, column, event) {
      // console.log(row, column, event)
      const id = row.id
      this.Bid = row.id
      this.isShow()
      const res = await this.$http.get(`series/selectAllByBrand?parent=${id}&pageNow=1&pageSize=9999`)
      console.log(res)
      const {msg,status,data:{records}} = res.data
      if(status === 200) {
        this.seriesData = records
      } else {
        console.log(msg)
      }
    },
    // 删除品牌
    deleteBrand (info) {
      this.$confirm('此操作将删除该品牌, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const id = info.id
        const res = await this.$http.delete(`brand/delete?id=${id}`)
        const {msg, status} = res.data
        if (status === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getBrand()
        } else {
          this.$message.error(msg)
        }
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除'
        // })
      })
    },
    // 删除系列
    deleteSeries (info) {
      this.$confirm('此操作将删除该系列, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const id = info.id
        const res = await this.$http.delete(`series/delete?id=${id}`)
        const {msg, status} = res.data
        if (status === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.$http.get(`series/selectAllByBrand?parent=${this.Bid}&pageNow=1&pageSize=9999`).then((mess)=>{
            console.log(mess)
            const {msg,status,data:{records}} = mess.data
            if(status === 200) {
              this.seriesData = records
            } else {
              console.log(msg)
            }
          })
        } else {
          this.$message.error(msg)
        }
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除'
        // })
      })
    },
    // 添加品牌
    AddBrand () {
      this.Bform={}
      this.dialogFormVisible = true
    },
    async sureAddB () {
      const res = await this.$http.post(`brand/add?brand=${this.Bform.name}`)
      console.log(res)
      const {msg,status} = res.data
      if(status === 200) {
        this.$message.success('添加成功！')
        this.dialogFormVisible = false
        this.getBrand()
      } else {
        console.log(msg)
      }
    },
    // 添加系列
    AddSeries () {
      this.dialogForm = true
    },
    async sureAddS () {
      const form = {
        name: this.Sform.name,
        parent: this.Bid
      }
      const res = await this.$http.post(`series/add`, form)
      console.log(res)
      const {msg,status} = res.data
      if(status === 200) {
        this.$message.success('添加成功！')
        this.dialogForm = false
        this.$http.get(`series/selectAllByBrand?parent=${this.Bid}&pageNow=1&pageSize=9999`).then((mess)=>{
          console.log(mess)
          const {msg,status,data:{records}} = mess.data
          if(status === 200) {
            this.seriesData = records
          } else {
            console.log(msg)
          }
        })
      } else {
        console.log(msg)
      }
    },
    // 控制是否显示添加系列按钮
    isShow () {
      if (this.Bid) {
        this.showbtn = true
      } else {
        this.showbtn = false
      }
    }
  }
}
</script>

<style scoped lang="stylus">
.ADselect,.card
  height 100%
  min-width: 1200px
  .box
    margin 50px
    height 50px
    padding 0 150px 0 150px
    .box1
      display inline-block
      width 340px
      padding 10px 10px 10px 10px
      border 2px solid #ccc
      border-radius 5px
      height 480px
      vertical-align top
    .box2
      display inline-block
      width 340px
      margin-left 80px
      padding 10px 10px 10px 10px
      border 2px solid #ccc
      border-radius 5px
      height 480px
.btn
  margin-left 240px
  margin-top 36px
.dialogBox
  width 500px
  padding-left 80px
</style>
